<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>视频列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="content">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">视频列表</h1>
        <div class="btn-group">
            <button class="btn btn-outline-secondary">
                <i class="fas fa-sync-alt"></i> 刷新
            </button>
        </div>
    </div>

    <div class="container mt-5">
<!--        <h2>视频管理</h2>-->
        <a href="/api/videos/upload" class="btn btn-primary mb-3">上传新视频</a>

        <!-- 状态筛选 -->
        <div class="mb-3">
            <a th:href="@{/api/videos}" class="btn btn-outline-secondary">全部</a>
            <a th:href="@{/api/videos(status=0)}" class="btn btn-outline-primary" th:classappend="${currentStatus == 0} ? 'active'">待审核</a>
            <a th:href="@{/api/videos(status=1)}" class="btn btn-outline-success" th:classappend="${currentStatus == 1} ? 'active'">已通过</a>
            <a th:href="@{/api/videos(status=2)}" class="btn btn-outline-danger" th:classappend="${currentStatus == 2} ? 'active'">已拒绝</a>
        </div>

        <!-- 提示信息 -->
        <div th:if="${success}" class="alert alert-success" th:text="${success}"></div>
        <div th:if="${error}" class="alert alert-danger" th:text="${error}"></div>

        <!-- 视频表格 -->
        <table class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>上传时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="video : ${videos}">
                <td th:text="${video.id}"></td>
                <td th:text="${video.title}"></td>
                <td th:text="${video.fileName}"></td>
                <td th:text="${@fileUtils.formatFileSize(video.fileSize)}"></td>
                <td>
                    <span class="badge bg-warning" th:if="${video.status == 0}">待审核</span>
                    <span class="badge bg-success" th:if="${video.status == 1}">已通过</span>
                    <span class="badge bg-danger" th:if="${video.status == 2}">已拒绝</span>
                </td>
                <td th:text="${video.uploadTime}"></td>
                <td>
                    <div th:if="${video.status == 0}">
                        <a th:href="@{/api/videos/audit/{id}(id=${video.id})}" class="btn btn-sm btn-info">审核</a>
                    </div>
                    <div th:if="${video.status == 1}">
                        <a th:href="@{/api/videos/download/{id}(id=${video.id})}" class="btn btn-sm btn-primary">下载</a>
                    </div>
                    <span th:if="${video.status == 2}" class="text-danger" th:text="${'原因：' + video.reason}"></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div layout:fragment="scripts">
    <script>
        // 仪表板特定的JS代码
        console.log('仪表板加载完成');
    </script>
</div>
</body>
</html>